import React, { memo, useEffect } from "react";
import { Row, Col, Divider } from "antd";
import { ProductCollectContainer } from "./style";
import ProductImage from "./productImage";
interface productCollectPropType {
  title: JSX.Element;
  sideImage: string;
  products: any;
}
const productCollect = memo<productCollectPropType>((props) => {
  const { title, sideImage, products } = props;
  return (
    <ProductCollectContainer>
      <Divider orientation="left">{title}</Divider>
      <Row>
        <Col span={4}>
          <img src={sideImage} alt="" className="side-image" />
        </Col>
        <Col span={20}>
          <Row>
            <Col span={12}>
              <ProductImage
                id={products.touristRoutes[0].id}
                size={"large"}
                title={products.touristRoutes[0].title}
                coverImg={products.touristRoutes[0].touristRoutePictures[0].url}
                price={products.touristRoutes[0].price}
              />
            </Col>
            <Col span={12}>
              <Row>
                <Col span={12}>
                  <ProductImage
                    id={products.touristRoutes[1].id}
                    size={"small"}
                    title={products.touristRoutes[1].title}
                    coverImg={
                      products.touristRoutes[1].touristRoutePictures[1].url
                    }
                    price={products.touristRoutes[1].price}
                  />
                </Col>
                <Col span={12}>
                  <ProductImage
                    id={products.touristRoutes[2].id}
                    size={"small"}
                    title={products.touristRoutes[2].title}
                    coverImg={
                      products.touristRoutes[2].touristRoutePictures[2].url
                    }
                    price={products.touristRoutes[2].price}
                  />
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <ProductImage
                    id={products.touristRoutes[3].id}
                    size={"small"}
                    title={products.touristRoutes[3].title}
                    coverImg={
                      products.touristRoutes[3].touristRoutePictures[2].url
                    }
                    price={products.touristRoutes[3].price}
                  />
                </Col>
                <Col span={12}>
                  <ProductImage
                    id={products.touristRoutes[4].id}
                    size={"small"}
                    title={products.touristRoutes[4].title}
                    coverImg={
                      products.touristRoutes[4].touristRoutePictures[3].url
                    }
                    price={products.touristRoutes[4].price}
                  />
                </Col>
              </Row>
            </Col>
          </Row>
          <Row>
            {products.touristRoutes.slice(5).map((item, index) => {
              return (
                <Col span={6} key={item.id}>
                  <ProductImage
                    id={item.id}
                    size={"small"}
                    title={item.title}
                    coverImg={item.touristRoutePictures[1].url}
                    price={item.originalPrice}
                  />
                </Col>
              );
            })}
          </Row>
        </Col>
      </Row>
    </ProductCollectContainer>
  );
});

export default productCollect;
